<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/carousel.css">
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="css/index.css">

    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/jquery.carousel.js"></script>
    <script src="js/index.js"></script>

    <title>湖北谷拜科技有限公司</title>

    <style type="text/css">
		.caroursel{margin: 0 auto;}
	</style>
</head>

<body>
    <!-- header 部分 -->
    <header class="header">
        <div class="h_container">
            <div class="logo"></div>
            <div class="nav">
                <ul class="h_nav">
                    <li class="active"><a href="index.html">首页</a></li>
                    <li><a href="case.html">案例</a></li>
                    <li><a href="addedServices.html">增值服务</a></li>
                    <li><a href="popularize.html">推广</a></li>
                    <li><a href="news.html">新闻</a></li>
                    <li><a href="about.html">关于</a></li>
                </ul>
            </div>
        </div>
    </header>

    <!-- banner 部分 -->
    <div class="banner"></div>

    <!-- main 部分 -->
    <!-- 模块一 -->
    <div class="container module_1">
        <div class="wechat_introduce">
            <div class="title"><img src="images/首页/矢量智能对象.png" class="m_1_title_img" />小程序介绍</div>
            <p class="m_1_title1">什么是小程序？</p>
            <p class="m_1_title2">无需下载即可使用的应用</p>
            <p class="m_1_title3">小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。</p>
        </div>
        <img src="images/首页/小程序介绍图.png" alt="" class="module_1_img">
    </div>

    <!-- 模块二 -->
    <div class="container module_2">
        <div class="module_2_title">
            <div class="ledgement"></div>
            谷拜小程序优势
            <div class="ledgement"></div>            
        </div>
        <div class="module_2_content list">
            <ul class="clearfix">
                <li>
                    <img src="images/首页/丰富主题图标.png" class="module_2_content_img1">
                    <p class="module_2_content_title">丰富灵活的主题</p>
                    <p class="module_2_content_text">多行业主题，流畅的体验，打造小
                        程序超级应用市场</p>
                </li>
                <li>
                    <img src="images/首页/同时拥有图标.png" class="module_2_content_img2">
                    <p class="module_2_content_title">5端同时拥有</p>
                    <p class="module_2_content_text">小程序，PC，平板，手机，微站
                            一次拥有</p>
                </li>
                <li>
                    <img src="images/首页/同步更新图标.png" class="module_2_content_img3">
                    <p class="module_2_content_title">一次发布5端同步更新</p>
                    <p class="module_2_content_text">商品，文章，活动统一管理，同步
                            更新</p>
                </li>
                <li>
                    <img src="images/首页/所有客户图标.png" class="module_2_content_img4">
                    <p class="module_2_content_title">一站管理所有客户</p>
                    <p class="module_2_content_text">打通5端会员与订单体系，客户
                            无需注册多个账号</p>
                </li>
                <li>
                    <img src="images/首页/自带流量图标.png" class="module_2_content_img5">
                    <p class="module_2_content_title">自带流量</p>
                    <p class="module_2_content_text">附近小程序，微信搜索等功能让你
                            轻松获取流量</p>
                </li>
                <li>
                    <img src="images/首页/定制开发图标.png" class="module_2_content_img6">
                    <p class="module_2_content_title">定制开发</p>
                    <p class="module_2_content_text">根据客户功能需求，单独开发专属
                            小程序</p>
                </li>
            </ul>
        </div>
    </div>

    <!-- 模块三 -->
    <div class="container module_3">
        <div class="module_3_title">
            <p class="m_3_title">微信小程序定制流程</p>
            <p class="m_3_explain">深度挖掘客户需求，精准定位程序功能</p>
        </div>
        <div class="there_box">
            <div class="background_img3 m_3_box1">
                <p class="m_3_explain_title">原型设计</p>
                <p class="m_3_explain_text">按照需求制作交互模拟，原型设计</p>
            </div>
            <div class="background_img3 m_3_box2">
                <p class="m_3_explain_title">编码设计</p>
                <p class="m_3_explain_text">后台，前台等应用数据对接与开发</p>
            </div>
            <div class="background_img3 m_3_box3">
                <p class="m_3_explain_title">发布上线</p>
                <p class="m_3_explain_text">发布到小程序应用平台上</p>
            </div>
        </div>
        <!-- <div class="there_longstring">
            <div class="t_long1"></div>
            <div class="t_long2"></div>
            <div class="t_long3"></div>
        </div> -->
        <div class="m_3_bar_img">
            <button class="m_3_btn1">1</button>
            <button class="m_3_btn2">2</button>
            <button class="m_3_btn3">3</button>
            <button class="m_3_btn4">4</button>
            <button class="m_3_btn5">5</button>
            <button class="m_3_btn6">6</button>
            <button class="m_3_btn7">7</button>
        </div>
        <!-- <div class="four_longstring">
            <div class="r_long1"></div>
            <div class="r_long2"></div>
            <div class="r_long3"></div>
            <div class="r_long4"></div>
        </div> -->
        <div class="four_box">
            <div class="background_img m_3_box4">
                <p class="m_3_explain_title">需求沟通</p>
                <p class="m_3_explain_text">倾听客户需求，了解用户使用环境和流程</p>
            </div>
            <div class="background_img m_3_box5">
                <p class="m_3_explain_title">UI设计</p>
                <p class="m_3_explain_text">色彩及平面元素设定，结构和布局规范确认</p>
            </div>
            <div class="background_img m_3_box6">
                <p class="m_3_explain_title">测试反馈</p>
                <p class="m_3_explain_text">测试反馈，修改调整，规范完善</p>
            </div>
            <div class="background_img m_3_box7">
                <p class="m_3_explain_title">交付验收</p>
                <p class="m_3_explain_text">客户验收功能及产品，满足定制需求</p>
            </div>
        </div>
    </div>

    <!-- 模块四 -->
    <div class="container module_4">
        <div class="module_2_title">
            <div class="ledgement"></div>
            小程序应用场景
            <div class="ledgement"></div>            
        </div>
        <img src="images/首页/组-38-拷贝.png" class="m_4_img">
    </div>

    <!-- 模块五 -->
    <div class="container module_5">
        <div class="module_2_title">
            <div class="ledgement"></div>
            小程序案例
            <div class="ledgement"></div>            
        </div>
        <ul class="m_5_nav clearfix">
            <li class="case_active"><a href="#">全部分类</a></li>
            <li><a href="#">房地产</a></li>
            <li><a href="#">服装</a></li>
            <li><a href="#">母婴</a></li>
            <li><a href="#">家居</a></li>
            <li><a href="#">健身</a></li>
            <li><a href="#">汽车</a></li>
        </ul>
        <!-- 轮播图 -->
        <article class="jq22-container">
		
            <div class = "caroursel poster-main" data-setting = '{
                "width":1000,
                "height":760,
                "posterWidth":324,
                "posterHeight":675,
                "scale":0.8,
                "dealy":"2000",
                "algin":"middle"
            }'>
                <ul class = "poster-list">
                    <li class = "poster-item"><img src="images/首页/图层-6-拷贝.png" width = "100%" height="100%"></li>
                    <li class = "poster-item"><img src="images/首页/图层-7.png" width = "100%" height="100%"></li>
                    <li class = "poster-item"><img src="images/首页/图层-8.png" width = "100%" height="100%"></li>
                </ul>
                
                <div class = "poster-btn poster-prev-btn"></div>
                <div class = "poster-btn poster-next-btn"></div>
    
            </div>
            
        </article>      
    </div>

     <!-- 模块六 -->
     <div class="module_6">
         <div class="container">
            <p>谷拜，让商业更简单</p>
            <div class="m_6_table">
                <input type="text" class="input1" placeholder="行业类型">
                <input type="text" class="input2"  placeholder="请输入您的姓名">
                <input type="text" class="input3"  placeholder="请输入您的电话">
                <button>预约定制</button>
            </div>
         </div>
     </div>

     <!-- 模块六 -->
     <footer class="container">
         <div class="f_top">
             <div class="f_left">
                <div class="product">
                    <div class="pro_t">产品</div>
                    <div class="pro_b">
                        <ul class="pro_b_l">
                            <li><a href="#">网站建设</a></li>
                            <li><a href="#">分销商城</a></li>
                            <li><a href="#">主题市场</a></li>
                            <li><a href="#">域名市场</a></li>
                        </ul>
                        <ul class="pro_b_r">
                            <li><a href="#">企业服务</a></li>
                            <li><a href="#">营销推广</a></li>
                            <li><a href="#">安全证书</a></li>
                            <li><a href="#">企业邮箱</a></li>
                        </ul>
                    </div>
                </div>
                <div class="document">
                    <div class="pro_t">文档</div>
                    <div class="docu_b">
                        <ul>
                            <li><a href="#">使用手册</a></li>
                            <li><a href="#">主题开发</a></li>
                            <li><a href="#">应用开发</a></li>
                            <li><a href="#">API/SDK</a></li>
                        </ul>
                    </div>
                </div>
                <div class="about">
                    <div class="pro_t">关于</div>
                    <div class="about_b">
                        <ul>
                            <li><a href="#">公司简介</a></li>
                            <li><a href="#">公司动态</a></li>
                            <li><a href="#">荣誉资质</a></li>
                        </ul>
                    </div>
                </div>
                <div class="attention">
                    <div class="pro_t">关注</div>
                    <div class="atten_b">
                        <ul>
                            <li><a href="#">新浪微博</a></li>
                            <li><a href="#">微信公众号</a></li>
                        </ul>
                    </div>
                </div>
             </div>
             <div class="f_right">
                 <img src="images/首页/微信图片_20181015155535.png" class="QR_code">
                 <p>联系我们：<span>15927199466 / 17671216625</span></p>
             </div>
         </div>
         <div class="f_bottom">
                公司地址：湖北省武汉市洪山区关南圆四路腾讯空间二楼&nbsp;&nbsp;网址：WWW.goobye,cn
         </div>
     </footer>

     <script>
        Caroursel.init($('.caroursel'))
    </script>

</body>

</html>